<template>
  <div class="Web_Box">

    <!--顶部bannerStart-->
    <mt-swipe :auto="4000" class="banner3 swiper-container">
      <mt-swipe-item class="swiper-slide" >
        <div class="swiper-slide" >
          <img src="http://mudan.mtveve.com/data/upload/mall/adv/05899386088716753.jpg" alt=""/>
        </div>
      </mt-swipe-item>
      <mt-swipe-item class="swiper-slide" >
        <div class="swiper-slide" >
          <img src="http://mudan.mtveve.com/data/upload/mall/adv/05899385912992573.jpg" alt=""/>
        </div>
      </mt-swipe-item>
    </mt-swipe>
    <!--顶部banner  End-->
    <div class="vip_list">
      <div class="title"><span>{{classifyText}}</span></div>
    </div>

    <div class="fenlie1">
      <ul>
        <!--<li  class="cur"><a href="https://www.baidu.com/">古田馆</a></li>-->
        <li :class="{'cur': goods_id == item.gc_id}" v-for="item in goodsClassData" @click="switchType(item.gc_id)"><a>{{item.gc_name}}</a></li>
      </ul>
    </div>

    <!--分类Start-->
    <!--<div class="fenlie1">-->
    <!--<ul>-->
    <!--&lt;!&ndash;<li v-for="item in classifyData" @click="changeCassify(item)" :class="item.id==classifyId?'cur':''"><a href="javascript:">{{item.class_name}}</a></li>&ndash;&gt;-->
    <!--<li @click="changeCassify(1)"><a href="javascript:">古田馆</a></li>-->
    <!--<li>进口直供</li>-->
    <!--</ul>-->
    <!--</div>-->
    <!--分类End-->

    <!--商品分类Start-->
    <div class="CommodityClassification">
      <div class="con"
        v-infinite-scroll="loadMoreGoods"
        infinite-scroll-disabled="false"
        infinite-scroll-distance="0"
        infinite-scroll-immediate-check="false">
        <ul id="content" v-for="item in curGood1.data">
          <li @click="gotoGoodsDetail(item)" style="width: 7.25rem;">
            <div class="pic"><img :src="hostName + $config.goodsImgSrc + item.goods_image" alt=""/></div>
            <h3 class="slh2">{{item.goods_name}}
            </h3>
            <p class="Price">￥{{item.goods_price}}</p>
          </li>
        </ul>
      </div>
    </div>
    <!--<div class="vip_list">-->
    <!--<ul>-->
    <!--<li>-->
    <!--<a href="CommodityDetails.html" >-->
    <!--<div class="vip_list_photo"><img src="http://mudan.mtveve.com/data/upload/mall/store/goods/1/1_05888589143963921.jpg" alt=""></div>-->
    <!--<span class="name title">红枣桂圆百合莲子银耳羹</span>-->
    <!--<span class="price">价格： <i>77.60元</i></span>-->
    <!--<span class="price">会员价：<i >67.00元</i></span>-->
    <!--</a>-->
    <!--<span class="btn" onClick="OpenPop('#PopBg,#AttributeSelectionPop')">-->
    <!--<b ><a href="">立即购买</a></b>-->
    <!--</span>-->
    <!--</li>-->

    <!--</ul>-->
    <!--</div>-->
    <loading-more :allLoaded="curGood1.allLoaded" :show="curGood1.data.length > 0"></loading-more>
    <empty-data :show="curGood1.allLoaded && curGood1.data.length <= 0" style="margin-top: 1.5rem"></empty-data>
    <!--商品分类End-->
    <back-nav></back-nav>
    <footer-tab></footer-tab>
  </div>
</template>

<script>
  import {Swipe, SwipeItem} from 'mint-ui'
  import {mapModules, mapRules} from 'vuet'

  export default {
    beforeRouteEnter(to, from, next) {
      next(vm => {
        vm.from = from.name
        vm.toFullPath = to.fullPath
      })
    },
    mixins: [
      mapModules({memberInfo: 'memberInfo'}),
      mapRules({once: 'memberInfo'})
    ],
    data() {
      return {
        classifyId: this.$route.query.classifyId || '',
        classifyText: this.$route.query.class_name || '',
        classifyData: [],
        curGood: {
          page: 1, pageSize: 10, requested: false, loading: false, allLoaded: false, data: []
        },
        goodstype: this.$route.query.goodstype || '4',
        goodsClassData: [],
        curCategoryId: this.$route.query.classifyId || '',
        goodsData: [],
        curGood1: {
          page: 1, pageSize: 10, requested: false, loading: false, allLoaded: false, data: []
        },
        goods_id: this.$route.query.gc_id || '339',
        hostName: 'http://' + window.location.hostname
      }
    },
    components: {
      'mtSwipe': Swipe,
      'mtSwipeItem': SwipeItem
    },
    created() {
      console.log('classifyid= ' + this.classifyId)
      this.init()
      this.getGoodsList(this.goods_id, 1, 10)
    },
    methods: {
      switchType(gc_id) {
        console.log(gc_id)
        this.curGood1 = {page: 1, pageSize: 10, requested: false, loading: false, allLoaded: false, data: []}
        this.getGoodsList(gc_id, this.curGood1.page, this.curGood1.pageSize)
      },
      goodsClass(gc_id) {
        this.curCategoryId = gc_id
        this.$request.goods_jp_class(gc_id).then(data => {
          this.goodsClassData = data.goods_list
        }).finally(() => {
        })
        console.log(document.getElementById(gc_id))
      },
      init() {
        this.getGoodsByClassify(this.classifyId, this.curGood.page, this.curGood.pageSize, this.goodstype)
        this.goodsClass(this.classifyId)
        // this.getClassifyGoods()
      },
      initCurGoodsList() {
        this.curGood.requested = false
        this.curGood.loading = false
        this.curGood.allLoaded = false
        this.curGood.page = 1
        this.curGood.pageSize = 10
        this.curGood.data = []
      },
      changeCassify(data) {
        console.log(data)
        if (this.classifyId != data.id) {
          this.classifyText = data.class_name
          this.classifyId = data.id
          this.initCurGoodsList()
          this.getGoodsByClassify(data.id, this.curGood.page, this.curGood.pageSize)
        }
      },
      getGoodsByClassify(id, page, pageSize, goodstype) {
        this.curGood.loading = true
        this.$request.getGoodsByClassify(id, page, pageSize, goodstype).then(data => {
          this.curGood.data = data.goods_class
        }).finally(() => {
        })
      },
      loadMoreGoods() {
        if (this.curGood1.loading || this.curGood1.allLoaded) { // 正在加载 或 已取得全部数据
          return
        }
        setTimeout(() => {
          this.getGoodsList(this.goods_id, ++this.curGood1.page, this.curGood1.pageSize)
        }, 500)
      },
      gotoGoodsDetail(goods) {
        // if (goods.goods_unit == '2') {
        //   this.$toast('该商品只能线下购买，请联系客服')
        //   return
        // }
        this.$router.push({name: 'goods-detail', params: {id: goods.goods_commonid}})
      },
      getGoodsList(gc_id, page, pageSize) {
        this.goods_id = gc_id
        this.curGood1.loading = true
        this.$request.goods_jp_gc_class(gc_id, page, pageSize).then(data => {
          if (data.length < pageSize) {
            this.curGood1.allLoaded = true
          }
          this.curGood1.data = [...this.curGood1.data, ...data]
        }).finally(() => {
          this.curGood1.requested = true
          this.curGood1.loading = false
        })
      }
    }
  }
</script>

<style>

</style>
